<template>
  <div class="searchContainer">
    <el-select v-model="selectCity" filterable placeholder="请选择" @change="handleChange"
      style="background-color: #fafcfe;" size="small">
      <el-option v-for="item in regionList" :key="item.value" :label="item.label"
        :value="item.value + '-' + item.label">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "regoinSearch",
  props: {
    limitNum: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      regionList: [
        {
          value: "",
          label: "全国",
        },
        {
          value: "110000",
          label: "北京",
        },
        { value: "310000", label: "上海" },
        {
          value: "440100",
          label: "广州",
        },
        {
          value: "440300",
          label: "深圳",
        },
        {
          value: "510100",
          label: "成都",
        },
        { value: "500000", label: "重庆" },
        { value: "330100", label: "杭州" },
        { value: "610100", label: "西安" },
        {
          value: "420100",
          label: "武汉",
        },
        {
          value: "320500",
          label: "苏州",
        },
        { value: "410100", label: "郑州" },
        { value: "320100", label: "南京" },
        {
          value: "120000",
          label: "天津",
        },
        { value: "430100", label: "长沙" },
        { value: "441900", label: "东莞" },
        {
          value: "330200",
          label: "宁波",
        },
        { value: "440600", label: "佛山" },
        {
          value: "340100",
          label: "合肥",
        },
        { value: "370200", label: "青岛" },
        {
          value: "530100",
          label: "昆明",
        },
        {
          value: "210100",
          label: "沈阳",
        },
        {
          value: "370100",
          label: "济南",
        },
        {
          value: "320200",
          label: "无锡",
        },
        {
          value: "350200",
          label: "厦门",
        },
        {
          value: "350100",
          label: "福州",
        },
        {
          value: "330300",
          label: "温州",
        },
        {
          value: "330700",
          label: "金华",
        },
        {
          value: "230100",
          label: "哈尔滨",
        },
        {
          value: "210200",
          label: "大连",
        },
        {
          value: "520100",
          label: "贵阳",
        },
        {
          value: "450100",
          label: "南宁",
        },
        { value: "350500", label: "泉州" },
        {
          value: "130100",
          label: "石家庄",
        },
        { value: "220100", label: "长春" },
        { value: "360100", label: "南昌" },
        { value: "441300", label: "惠州" },
        { value: "320400", label: "常州" },
        { value: "330400", label: "嘉兴" },
        { value: "320300", label: "徐州" },
        { value: "320600", label: "南通" },
        { value: "140100", label: "太原" },
        { value: "130600", label: "保定" },
        { value: "440400", label: "珠海" },
        { value: "442000", label: "中山" },
        {
          value: "620100",
          label: "兰州",
        },
        {
          value: "371300",
          label: "临沂",
        },
        { value: "370700", label: "潍坊" },
        { value: "370600", label: "烟台" },
        { value: "330600", label: "绍兴" },
      ],
      initSelectId: [
        "-全国",
        "110000-北京",
        "310000-上海",
        "440100-广州",
        "440300-深圳",
        "510100-成都",
      ],
      selectedId: [],
      isExtend: false,
      selectCity: "-全国",
    };
  },
  created() {
    if (this.limitNum == 1) {
      this.selectedId = this.initSelectId.splice(0, this.limitNum);
    } else {
      this.selectedId = this.initSelectId.splice(1, this.limitNum);
      this.regionList.splice(0, 1);
    }

    this.$emit("onRegionChange", this.selectedId);
  },
  deactivated() {
    this.selectedId = [];
  },
  beforeDestroy() {
    this.selectedId = [];
  },
  methods: {
    // handleCloseClick(item) {},
    // handleCheckboxChange(item) {
    //   if (this.limitNum == 1) {
    //     this.selectedId = [];
    //     this.selectedId.push(item[item.length - 1]);
    //   }
    //   this.$emit("onRegionChange", this.selectedId);
    // },
    // handleSwitchBtnClick() {
    //   this.isExtend = !this.isExtend;
    // },
    handleChange(item) {
      //console.log("selectCityChange----------->", item);
      this.selectedId = [];
      this.selectedId.push(item);
      this.$emit("onRegionChange", this.selectedId);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-checkbox {
  font-weight: 400;
  .el-checkbox__inner {
    width: 12px;
    height: 12px;
    border-radius: 3px;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #fff;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    background-color: #fff;
    border-color: #dcdfe6;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #fff;
    border-color: #409eff;
  }
  .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
    border-color: #409eff;
  }
}
// ::v-deep .el-checkbox__label {
//   font-size: 14px;
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #555555;
//   line-height: 20px;
// }
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409eff;
}
// ::v-deep .el-checkbox__input.is-checked + .el-checkbox__inner {
//   color: #1b78ff;
// }

::v-deep .el-select .el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
  border: 1px solid #e4edf8;
  background: #fafcfe;
  border-radius: 4px;
  border: 1px solid #e4edf8;
}
.searchContainer {
  display: flex;
  align-items: flex-start;
  max-width: 100vw;
  .optionsBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // width: 1000px;
    height: 40px;
    overflow: hidden;
    transition: height 0.2s;
    .optionItem {
      display: flex;
      align-items: center;
      color: #333;
      float: left;
      line-height: 1.2;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        background-color: #e4e4e4;
      }
    }
    .selected {
      background-color: #e4e4e4;
    }
    &.isExtend {
      height: auto;
      transition: height 0.2s;
    }
    @keyframes extend {
      from {
        height: 26px;
      }
      to {
        height: 106px;
      }
    }
  }
  .switchBtn {
    color: #999;
    cursor: pointer;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 60px;
    white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    margin-top: 8px;

    background: #f1f1f1;
  }
}

.close {
  margin-left: 4px;
}
</style>
